function getImage(color: string) {
  const svgXML: string = `<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
        <path d="M100.5,99.88a2.07,2.07,0,0,1,1.89,1.23l35.32,79a2.07,2.07,0,0,1-3,2.6l-34.2-22.13L66.29,182.67a2.07,2.07,0,0,1-3-2.6l35.33-79A2.07,2.07,0,0,1,100.5,99.88Z" fill="${color}"/>
        </svg>`
  const svgBase64 = `data:image/svg+xml;base64,${window.btoa(
    unescape(encodeURIComponent(svgXML))
  )}`
  const arrowIcon = new Image(80, 80)
  arrowIcon.src = svgBase64
  return arrowIcon
}

/**
 * 地图加载一个指定颜色的图片
 * @param mapBox
 * @param color
 */
export default function mapBoxLoadImage(mapBox: any, color: string) {
  const arrowIcon = getImage(color)
  if (mapBox.hasImage(`arrowIcon${color}`)) {
    return
  }
  /* eslint-disable */
  arrowIcon.onload = () => {
    mapBox.addImage(`arrowIcon${color}`, arrowIcon)
  }
  /* eslint-enable */
}

/**
 * 从线中取点
 * @param layer
 * @param lineGeojson
 */
function tackPointFrom(layer: any, lineGeojson: any) {
  const pointData: any = {
    type: 'FeatureCollection',
    features: [],
  }
  if (lineGeojson.features[0]?.geometry.type === 'LineString') {
    lineGeojson.features.forEach((features: any) => {
      if (features.geometry.coordinates.length >= 2) {
        features.geometry.coordinates.reduce(
          (previousPoint: any, currentPoint: any) => {
            // const points: any = turf.featureCollection([
            //   turf.point( previousPoint),
            //   turf.point( currentPoint)
            // ])
            // const minPointCoordinates: any = turf.center(points).geometry.coordinates
            // console.log(minPointCoordinates)
            const radian = Math.atan2(
              previousPoint[0] - currentPoint[0],
              previousPoint[1] - currentPoint[1]
            )
            const angle = (180 / Math.PI) * radian
            // if (currentIndex % 2 === 1) {
            const data: any = {
              type: 'Feature',
              geometry: {
                type: 'Point',
                coordinates: currentPoint,
              },
              properties: {
                angle,
                ...features.properties,
              },
            }
            pointData.features.push(data)
            // }
            return currentPoint
          }
        )
      }
    })
  }
  return pointData
}

/**
 * 生成 icon
 * @param mapboxInstance
 * @param layer
 */
function generateImageIcon(mapboxInstance: any, layer: any) {
  const { attributeTag, globalInfo } = layer.data.tagInfo
  let color: any = '#000000'
  const colorTag: any = attributeTag.find((tag: any) => tag.tagType === 'color')
  if (!colorTag) {
    color = globalInfo.globalColor
  } else {
    /* eslint-disable */
    color = colorTag.config.paint['line-color'][5]
    /* eslint-enable */
  }
  const layoutIconImage: any = {
    'icon-image': `arrowIcon${color}`,
  }
  const iconImage: any[] = []
  const colors: string[] = []
  const colorExpressionLength: number = color.length
  if (typeof color !== 'string') {
    color.forEach((item: any, index: number) => {
      if (
        (item === 'match' && index === 0) ||
        index === 1 ||
        (index % 2 === 0 && index !== colorExpressionLength - 1)
      ) {
        iconImage.push(item)
      } else {
        iconImage.push(`arrowIcon${item}`)
        mapBoxLoadImage(mapboxInstance, item)
        colors.push(item)
      }
    })
    layoutIconImage['icon-image'] = iconImage
  } else {
    mapBoxLoadImage(mapboxInstance, color)
  }
  return layoutIconImage
}

/**
 * 添加线的箭头图层 symbol
 * @param mapboxInstance
 * @param layer
 * @param lineGeojson
 * @param beforeId
 */
export function addArrowLayerByLineLayer(
  mapboxInstance: any,
  layer: any,
  lineGeojson: any,
  beforeId: string
) {
  const pointData =
    lineGeojson && lineGeojson.features.length > 0
      ? tackPointFrom(layer, lineGeojson)
      : null
  const layoutIconImage = generateImageIcon(mapboxInstance, layer)
  const sourceId: string = `arrow-source-${layer.id}`
  mapboxInstance.addSource(sourceId, { data: pointData, type: 'geojson' })
  mapboxInstance.addLayer(
    {
      id: `arrow-layer-${layer.id}`,
      type: 'symbol',
      source: sourceId,
      layout: {
        ...layoutIconImage,
        'icon-size': 0.6,
        'icon-rotate': ['+', ['get', 'angle'], 180],
        'symbol-placement': 'point',
        'icon-ignore-placement': true,
        'icon-rotation-alignment': 'map',
        'icon-allow-overlap': true,
      },
    },
    beforeId
  )
}

/**
 * 更新箭头的图标
 * @param mapboxInstance
 * @param layer
 */
export function updateArrowLayer(mapboxInstance: any, layer: any) {
  const layoutIconImage = generateImageIcon(mapboxInstance, layer)
  mapboxInstance.setLayoutProperty(
    `arrow-layer-${layer.id}`,
    'icon-image',
    layoutIconImage['icon-image']
  )
}

/**
 * 更新箭头 with 图层数据
 * @param mapboxInstance
 * @param layer
 * @param lineGeojson
 */
export function updateArrowLayerWithData(
  mapboxInstance: any,
  layer: any,
  lineGeojson: any
) {
  const pointData = tackPointFrom(layer, lineGeojson)
  const sourceId: string = `arrow-source-${layer.id}`
  mapboxInstance.getSource(sourceId).setData(pointData)
  updateArrowLayer(mapboxInstance, layer)
}
